<template>
  <div class="box">
    <div class="nav">
      <div class="nav-item" 
        v-for="(item,index) in items" 
        :key="index" 
        @click="changeActive(index)"
        :style="active == index ? 'color:#0f4494;font-weight:bold' : ''"
      >
        {{item.name}}
        <div class="line" :class="{'active':index == active}"></div>
      </div>
    </div>
    <div class="nav_B">
      <div class="navb-item"
        v-for="(item,index) in breed"
        :key="index"  
      >
        {{item.name}}
      </div>
    </div>
    <!-- <div class="content">
      <div class="text" v-for="(item,index) in count.result.records.slice(0,8)" :key="index">
        <div style="display:flex;align-items: center;">
          <div class="triangle-right"></div>
          <p class="title">{{item.title}}</p>
        </div>
        <div class="title" style="margin-right: 10px;" :style=" item.pubTime.slice(5,10) == count.result.records[0].pubTime.slice(5,10) ? 'color:#C90A0A' : ''">{{'[' + item.pubTime.slice(5,10) + ']'}}</div>
      </div>
    </div> -->
  </div>
</template>

<script setup>
  const items = [
    { name: '日报', id: '' },
    { name: '周报', id: '' },
    { name: '国内月报', id: '' },
    { name: '国际月报', id: '' },
    { name: '供需报告', id: '' },
  ];
  const breed = [
    { name: '全部', id: '' },
    { name: '小麦', id: '' },
    { name: '稻谷', id: '' },
    { name: '玉米', id: '' },
    { name: '油脂油料', id: '' },
  ];
  const active = ref(0);
</script>

<style lang="scss" scoped>
  .box{
    height: 236px;
    background-color: #fafafa;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .nav{
      width: 100%;
      height: 32px;
      background-color: #f0f6fa;
      color: #222;
      display: flex;
      .nav-item{
        width: 20%;
        text-align: center;
        line-height: 30px;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        align-items: center;
        .line{
          width: 56px;
          height: 2px;
          background-color: #f0f6fa;
        }
        .active{
          background-color: #0f4494;
        }
      }
    }
    .nav_B{
      width: 100%;
      height: 32px;
      color: #222;
      display: flex;
      align-items: center;
      .navb-item{
        width: 55px;
        height: 16px;
        margin: 0 6px;
        border: 1px #1A52A5 solid;
        color: #1A52A5;
        border-radius: 5px;
        font-size: 12px;
        line-height: 16px;
        text-align: center;
        cursor: pointer;
      }
    }
    .content{
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      .text{
        height: 34px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .triangle-right {
          margin: 0 5px;
          width: 0;
          height: 0;
          border-top: 4px solid transparent;    /* 高度的一半（8px / 2） */
          border-bottom: 4px solid transparent; /* 高度的一半（8px / 2） */
          border-left: 6px solid #CCC;         /* 宽度（6px），颜色可自定义 */
        }
        .title{
          color: #222;
          font-size: 14px;
          line-height: 21px;
          white-space: nowrap;
          max-width: 290px;
          text-overflow: ellipsis;
          overflow: hidden;
          cursor: pointer;
        }
      }
    }
  }
</style>